<template>
<div class="base-info">
	<div class="item" v-for="(value, key) in dataEnum" :key="key">
		<p>{{ value }}：</p>
		<p>{{ houseData[key] ?? '-' }}</p>
	</div>
  <template v-if="showLocation">
    <div class="item" v-for="(value, key) in locationEnum" :key="key">
      <p>{{ value }}：</p>
      <p>{{ locationInfo?.[key] ?? '-' }}</p>
    </div>
  </template>

	<slot />
</div>
</template>

<script setup>
import {ref, defineProps} from 'vue'

defineProps({
  houseData: {
    type: Object,
    default: () => {
    }
  },
  locationInfo: {
    type: Object,
    default: () => {
    }
  },
  showLocation: {
    type: Boolean,
    default: false
  }
})

const dataEnum = ref({
  'fwbh': '房屋编号',
  'hzxm': '户主姓名',
  'address': '房屋地址',
  'region': '行政区划',
})

const locationEnum = ref({
  address: '当前位置',
  lng: '经度',
  lat: '纬度',
})

</script>

<style scoped lang="less">
.base-info {
  padding: 32px 0;
  margin: 0 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, .14);
  border-radius: 8px;
  background: #fff;

  .item {
    display: flex;
    margin: 0 32px;

    &:nth-last-of-type(1) {
      border: 0;
    }

    p {
      line-height: 44px;

      &:nth-of-type(1) {
				color: var(--content-color);
			}
			&:nth-of-type(2) {
				width: 0;
				flex: 1;
				color: var(--title-color);
			}
		}
	}
}
</style>
